<template>
  <transition>
    <div class="Sweiper-item" v-show="isShow">
      <slot></slot>
    </div>
  </transition>
</template>
<script>
  export default {
    name:"SweiperItem",
    data(){
      return{
        selected:""
      }
    },
    props:{
      name:{
        type:String,
        required:true
      },
    },
    mounted(){

    },
    computed:{
      isShow(){
        return this.selected===this.name;
      }
    }
  };

</script>
<style>
  .v-enter-active{
    transition: all 1s linear;
  }
  .v-leave-active{
    show:false;
   }
  .v-leave-to{
    show:false;
  }
  .v-enter{
    transform: translate(100%);
  }
  /*.v-enter-active{*/
  /*  position: absolute;*/
  /*  top:0;*/
  /*  left: 0;*/
  /*}*/
</style>
